<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.sinodata.bsm.common.vo.*"%>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    Long resid = Long.parseLong(request.getParameter("id"));
    List<Attribute> attributes = (List<Attribute>) request.getAttribute("attributes");
    Map<Long, String> map = (Map<Long, String>) request.getAttribute("attVals");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>实时指标值页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<%@ include file="../include/common.jsp"%>
<%@ include file="../include/table.jsp"%>
<%@ include file="../include/tooltip.jsp"%>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/raty/js/jquery.raty.min.js"></script>
<script type="text/javascript">
	var map  = new Array();
	$(document).ready(function() {
			$("#propertyInfo").dataTable({
				"bProcessing" : false,
				"bPaginate" : false,
				"bSort" : true,
				"bFilter" : false,
				"bServerSide" : true,
				"sPaginationType" : 'full_numbers',
				"sServerMethod" : 'POST',
				"sAjaxSource" : '../performance/prop-value!list.action',
				"aoColumns" : [
						{
							"mDataProp" : "propname","bSortable" : false,"fnCreatedCell" : function(nTd, sData,oData, iRow,iCol) {
								var v = oData.propvalue;
								var html = null;
								if (v == '--') {
									html = "<div style='color:gray;text-decoration:line-through;'>"+ sData+ "</div>";
								} else {
									html = sData;
								}
								$(nTd).html(html);
							}
						},
						{
							"mDataProp" : "propvalue","bSortable" : false,"fnCreatedCell" : function(nTd, sData,oData, iRow,iCol) {
								var v = oData.propvalue;
								if(oData.dataType==2){
									var id="${id}_"+oData.propId;
									var ss = "<a id='"+id+"'  rel='../performance/prop-value!tooltip.action?id=${id}&propId="+oData.propId+"' href='#'>"+ v +"</a>";
									$(nTd).html( ss);
								}else{
									$(nTd).html(v);
								}
							}	
						},
						{
							"mDataProp" : "collectTime","bSortable" : false,"fnCreatedCell" : function(nTd, sData,oData, iRow,iCol) {
								$(nTd).html(sData);
							}
						} ],
				"oLanguage" : {
					"sZeroRecords" : "没有找到记录",
					"sInfo" : "",
					"sInfoEmpty" : ""
				},
				"fnServerParams" : function(aoData) {
					aoData.push({
						'name' : 'id',
						'value' : '${id}'
					});
					aoData.push({
						'name' : 'tt',
						'value' : new Date()
								.getMilliseconds()
					});
				},
				"fnRowCallback":function( nRow, aData, iDisplayIndex, iDisplayIndexFull )
				{		
						if(aData.dataType==2){
							var id="${id}_"+aData.propId;
							map.push(id);
						}
				},
				 "fnDrawCallback": function () {
					setTimeout('setValueToolTip()',800);
				 },
				 "fnInitComplete":function(){
				 	var propertyTbl = $("#propertyInfo").dataTable();
					var nodes = propertyTbl.fnGetNodes();
					if(nodes.length<1){
						$("#resPropertyInfo").hide();
					}else{
						$("#resPropertyInfo").show();
					}
				 }
			});
			showResList();
			filterProperties();
			setInterval('refreshData()', 30000);
			setInterval('filterProperties()', 30000);
	});
	
	
	
	
	//检查是否要显示子资源的列表
	function showResList(){
		$.ajax({
			type:'post',
			url:'prop-value!showResList.action',
			data:{
				id:<%=resid %>
			},
			cache:false,
			dataType:'json',
			success:function(data){
				//如果指标数大于1  则不显示子资源列表
				if(data.size >0){
					$('#reslistinfo').css('display','none');
				}else{
					if(data.resSize>0){
						$('#reslistinfo').css('display','');
						$('#tipInfo').css('display','none');
						var tbl = $('#invalidSessionList > tbody ');
						$.each(data.data,function(index,value){
						    var dataHtml = (index%2)==0?'<tr class="odd" >': '<tr class="even" >';
						    $.each(value,function(i,v){
						    	dataHtml +='<td>'+v+'</td>';
						    });
						    dataHtml +='</tr>';
							tbl.append(dataHtml);
						});
						
						var valueSpan = $("span:.health");
						
						$.each(valueSpan,function(index,ob){
							var id = $(ob).attr('id');
							var value = $(ob).attr('value');
							$('#'+id).raty({
								start: value/20,
								readOnly:  true,
								hintList:[ ''+value,''+value,''+value,''+value,''+value],
								path: '${pageContext.request.contextPath}/js/raty/img/'
							});
						});
					}else{
						$('#tipInfo').css('display','');
					}
				}
			}
		});
	}
					
	function setValueToolTip()
	{
	 	for(var i =0; i<map.length; i++) 
	 		$("#"+map[i]).cluetip({ sticky: true,  mouseOutClose: true, arrows: true, showTitle: false,
					  width:290
					  ,
					  closePosition: 'title',
					  cluetipClass: 'rounded',
					  clickThrough:false,
					  ajaxCache: false
					  
					});
	}
	refreshData = function() {
		map = new Array();
		$('#propertyInfo').dataTable().fnClearTable();
		
	
	}
	
	//过滤指标的数据类型为对象型的数据 
	function filterProperties(){
		$('div[name="dynamicDiv"]').remove();
		//$('.title-h2').remove();
	
		$.ajax({
			type:'post',
			url:'../performance/prop-value!initDatatables.action',
			data:{resId:'${id}'},
			global:false,
			async:false,
			cache:false,
			dataType:'json',
			success:function(data,textStatus){
				var columnArray = data.columns;
				var datas       = data.data;
				var props       = data.props;
				$.each(columnArray,function(index,ob){
					var cols = ob;
					$('body').append("<div name='dynamicDiv' class='common-column' ><h2 class='title-h2 m-0' onclick='accordionDiv(this)'><span><img src='${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif'/></span>"+props[index]+"</h2><div><table width='100%' cellpadding='0' cellspacing='0' border='0' class='display' id='filterPropertyInfo"+index+"' ><thead><tr></tr></thead><tbody></tbody></table></div></div>");
					var tr = $('#filterPropertyInfo'+index+' thead tr');
					$.each(cols,function(index,ob){
						tr.append('<th>'+ob+'</th>');
					});
					
					var tbl = $('#filterPropertyInfo'+index+' tbody ');
					if(datas[index]!=null){
					$.each(datas[index],function(i,o){
						var dataHtml = (i%2)==0?'<tr class="odd" >': '<tr class="even" >';
							$.each(o,function(t,en){
								dataHtml +='<td>'+en+'</td>';
							});
						dataHtml +='</tr>';
						tbl.append(dataHtml);
					});
					}
				});
			},
			error:function(entity,msg){
				
			}
		});		
	}
</script>

</head>
<body>

	<div id="resPropertyInfo" class="common-column" >
	 	<table width="100%" id="propertyInfo"  cellpadding='0' cellspacing='0' border='0' class="display">
			<thead>
				<tr>
					<th width="25%">指标名称</th>
					<th width="25%">采集值</th>
					<th width="50%">采集时间</th>
				</tr>
			</thead>
		</table>
	</div>
		
	<div id="reslistinfo" class="common-column" style="clear:both;margin-top:5px;display:none">
		   <h2 class="title-h2 m-0" onclick='accordionDiv(this)'><span><img src='${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif'/></span>子资源列表</h2>
		  	<div>
		   <table width='100%' cellpadding='0' cellspacing='0' border='0' class='display' id='invalidSessionList'>
		       <thead>
		             <tr>
			            <th width="20%">资源名称</th>
						<th width="20%">健康度</th>
						<th width="10%">类别</th>
						<th width="10%">IP</th>
						<th width="40%">描述</th>
		             </tr>
		       </thead>
		       <tbody>
		       </tbody>
		   </table>
		   </div> 
	</div>
	 
	 <div id="tipInfo" class="common-column " style="clear:both;margin-top:5px;display:none">
		   <h2 class="title-h2 m-0">系统提示</h2>
		   <br/>
		   <br/>
		   <h3>此资源没有指标 也没有子资源!!</h3> 
	 </div>
	 
	 
	 
	 <div class="common-column" style="width:100%;height:5px;"></div>
</body>
</html>